import React, { useEffect, useState } from "react";
import '../Cate/Confrim.css'
import { Space } from 'react-vant'
import { ArrowLeft, Arrow } from '@react-vant/icons'
import { useNavigate } from "react-router-dom";
import { useSearchParams } from "react-router-dom";
import { Button, message } from 'antd';
import axios from "axios";
axios.defaults.baseURL = 'http://127.0.0.1:3000/';
export default function Confrim() {
    const Navigate = useNavigate()


    const [SearchParams] = useSearchParams();
    const _id = SearchParams.get('_id')
    const img = SearchParams.get('img')
    const name = SearchParams.get('name')
    const specs = SearchParams.get('specs')
    const price = SearchParams.get('price')
    const BuyQuantity = SearchParams.get('BuyQuantity')
    console.log(_id);
    

    const [address,setAddress] = useState([])
    console.log(address);
    
    const [id,setID] = useState('')

    
    const getUser = async () => {
        let { data: { code, id ,adress} } = await axios.get('/sUnJIahuI/login')
        // console.log(id);
        // console.log(adress);
        setAddress(adress)
        setID(id)
    }
    const totototoBack = () => {
        Navigate(-1)
    }

    const addOrder = async() => {
        let obj={state:1,goodsid:[{_id:_id,img:img,name:name,specs:specs,price:price,count:BuyQuantity}],address:[address],uid:id}
        let {data:{code}}=await axios.post('/sUnJIahuI/addOrder',obj)
        if(code === 200){
            message.success("下单成功")
            Navigate('/orderform?cate=1')
        }
    }

    const [flow,setFlow] = useState([])

    const Find = async() => {
        let {data:{code,flo}}=await axios.get(`/sUnJIahuI/find?id=${_id}`)
        if(code === 200){
            console.log(flo);
            setFlow(flo)
        }
    }


    useEffect(() => {
        getUser()
        Find()
    }, [])

    return (
        <>
            <div className="ConfrimBigBox">
                <div className="confrimOneBox">
                    <Space className='demo-icon' onClick={() => totototoBack()} >
                        <ArrowLeft className="BoxIcon" />
                    </Space>
                    <span className="BoxText">确认订单</span>
                </div>
                <div className="confrimOneBox2">
                    {
                        address == [] ?
                        <>
                            <span className="Box2Text1">暂未获取到收到地址</span>
                            <span className="Box2Text2">+新增收到地址</span>
                        </>:
                        <>
                            {
                                address.map((item)=>{
                                    return <div key={item._id}>
                                        <span className="addressName">姓名：{ item.name }</span>
                                        <p className="addressPhone">电话：{ item.phone }</p>
                                        <p className="addressAddress">收获地址：{item.address}</p>
                                    </div>
                                })
                            }
                        </>
                    }
                    
                    
                </div>

                <div className="confrimOneBox3">
                    <img src={img} width={"75vw"} height={"75vh"} className="Box3Img"></img>
                    <p className="Box3Text1">{name}/{specs}枝</p>
                    <p className="Box3Text2">{specs}枝/扎</p>
                    <p className="Box3Text3">￥{price}</p>
                    <p className="Box3Text4">×{BuyQuantity}</p>
                </div>

                <div className="confrimOneBox4">
                    <p className="box4P-text">
                        <span className="Box4Text1">商品总价</span>
                        <span className="Box4Text2">共{BuyQuantity}件商品</span>
                        <span className="Box4Text3">￥{BuyQuantity * price}</span>
                    </p>
                    <div className="box4Inbox1">
                        <span className="Box4Text4">优惠卷</span>
                        <span className="Box4Text5">暂无可用</span>
                        <Space className='demo-icon' gap={20}>
                            <Arrow className="Box4Icon" />
                        </Space>
                    </div>
                    <p className="box4P-text2">
                        <span className="Box4Text6">合计:</span>
                        <span className="Box4Text7">￥{BuyQuantity * price}</span>
                    </p>
                </div>

                <div className="confrimOneBox5">
                    <span className="Box5Text1">买家留言:</span>
                    <span className="Box5Text2">留言建议与商家协商(250字以内)</span>
                </div>

                <div className="confrimOneBox6">
                    <span className="Box6Text1">合计:</span>
                    <span className="Box6Text2">￥{BuyQuantity * price}</span>
                    <button className="Box6Button" onClick={() => addOrder()}>提交订单</button>
                </div>
                
            </div>
        </>
    )
}